<template>
    <div v-loading="loading">
        <!-- <el-button type="primary" @click="handleAddPaper">添加</el-button>
        <el-button type="primary" @click="studentGetPaper">刷新</el-button> -->
        <el-form :model="searchForm">
            <el-row>
                <el-col :span="7" class="serach-padding">
                    <el-form-item label="成果创建时间">
                        <el-date-picker v-model="searchForm.dateRange" type="daterange" value-format="YYYY-MM-DD"
                            range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="5" class="serach-padding">
                    <el-form-item label="审核状态">
                        <el-select v-model="searchForm.reviewStatusId" placeholder="请选择" width="150px">
                            <el-option label="待审核" value="1"></el-option>
                            <el-option label="审核中" value="2"></el-option>
                            <el-option label="审核通过" value="3"></el-option>
                            <el-option label="审核拒绝" value="4"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="5" class="serach-padding">
                    <el-form-item>
                        <el-button @click="searchPaper">查询</el-button>
                        <el-button @click="clearSearchOption">清空</el-button>
                    </el-form-item>

                </el-col>
                <div class="flex-grow"></div>
                <el-button @click="handleAddPaper">添加</el-button>
                <el-button @click="clearSearchOption">刷新</el-button>
            </el-row>

        </el-form>







        <!--论文表格-->
        <el-table :data="achievementPaper" style="width: 100%; margin-top: 10px;" stripe :border="true">
            <el-table-column fixed="left" prop="createdDate" label="创建时间" width="110"></el-table-column>
            <el-table-column fixed="left" prop="reviewStatus" label="审核状态" width="100">
                <!-- <template slot-scope="scope">
                    <span>{{ reviewStatusText(reviewStatusId) }}</span>
                </template> -->
            </el-table-column>
            <el-table-column prop="paperName" label="论文名称" min-width="200" show-overflow-tooltip></el-table-column>
            <el-table-column prop="journal" label="期刊" min-width="150" show-overflow-tooltip></el-table-column>
            <el-table-column prop="issue" label="期号" width="80" show-overflow-tooltip></el-table-column>
            <el-table-column prop="volume" label="卷号" width="80" show-overflow-tooltip></el-table-column>
            <el-table-column prop="page" label="页码" width="80" show-overflow-tooltip></el-table-column>
            <el-table-column prop="retrievalLevel" label="检索级别" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column prop="authorList" label="作者名单" min-width="180" show-overflow-tooltip></el-table-column>
            <el-table-column prop="firstAuthor" label="第一作者" width="120" show-overflow-tooltip></el-table-column>
            <el-table-column prop="correspondingAuthor" label="通讯作者" width="120"
                show-overflow-tooltip></el-table-column>
            <el-table-column prop="publicationDate" label="发表日期" width="120" show-overflow-tooltip></el-table-column>
            <el-table-column prop="impactFactor" label="影响因子" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column prop="paperLink" label="论文链接" min-width="150" max-width="200">
                <template #default="scope">
                    <el-link :href="scope.row.paperLink" target="_blank" type="primary">查看链接</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="submissionDate" label="填报日期" width="120"></el-table-column>
            <el-table-column fixed="right" label="操作" width="70">
                <template #default="scope">
                    <el-row>
                        <el-button type="primary" @click="handleChangePaper(scope.row)" size="small">操作</el-button>
                    </el-row>
                </template>
            </el-table-column>
        </el-table>


        <!--学生添加论文-->
        <el-dialog v-model="dialogAddPaperVisible" title="添加论文">
            <el-form ref="formRef" :model="studentAddPaperInfo" label-width="120px" hide-required-asterisk>

                <el-form-item label="论文名称" prop="paperName">
                    <el-input v-model="studentAddPaperInfo.paperName"></el-input>
                </el-form-item>
                <el-form-item label="期刊" prop="journal">
                    <el-input v-model="studentAddPaperInfo.journal"></el-input>
                </el-form-item>
                <el-form-item label="期号" prop="issue">
                    <el-input v-model="studentAddPaperInfo.issue"></el-input>
                </el-form-item>
                <el-form-item label="卷号" prop="volume">
                    <el-input v-model="studentAddPaperInfo.volume"></el-input>
                </el-form-item>
                <el-form-item label="页码" prop="page">
                    <el-input v-model="studentAddPaperInfo.page"></el-input>
                </el-form-item>
                <el-form-item label="检索级别" prop="retrievalLevel">
                    <el-input v-model="studentAddPaperInfo.retrievalLevel"></el-input>
                </el-form-item>
                <el-form-item label="作者名单" prop="authorList">
                    <el-input v-model="studentAddPaperInfo.authorList"></el-input>
                </el-form-item>
                <el-form-item label="第一作者" prop="firstAuthor">
                    <el-input v-model="studentAddPaperInfo.firstAuthor"></el-input>
                </el-form-item>
                <el-form-item label="通讯作者" prop="correspondingAuthor">
                    <el-input v-model="studentAddPaperInfo.correspondingAuthor"></el-input>
                </el-form-item>
                <el-form-item label="发表日期" prop="publicationDate">
                    <el-date-picker v-model="studentAddPaperInfo.publicationDate" type="date" placeholder="选择日期"
                        value-format="YYYY-MM-DD"></el-date-picker>
                </el-form-item>
                <el-form-item label="影响因子" prop="impactFactor">
                    <el-input v-model="studentAddPaperInfo.impactFactor"></el-input>
                </el-form-item>
                <el-form-item label="论文链接" prop="paperLink">
                    <el-input v-model="studentAddPaperInfo.paperLink"></el-input>
                </el-form-item>
                <el-form-item label="填报日期" prop="submissionDate">
                    <el-date-picker v-model="studentAddPaperInfo.submissionDate" type="date" placeholder="选择日期"
                        value-format="YYYY-MM-DD"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="studentAddPaper">添加</el-button>
                    <el-button @click="dialogAddPaperVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>



        <!--学生操作论文-->
        <el-dialog title="操作论文" v-model="dialogChangePaperVisible" width="80%">
            <el-form :model="studentAddPaperInfo" label-width="120px">
                <el-form-item label="论文名称">
                    <el-input v-model="currentPaperInfo.paperName" :disabled="!editModel"></el-input>
                </el-form-item>
                <el-form-item label="期刊">
                    <el-input v-model="currentPaperInfo.journal" :disabled="!editModel"></el-input>
                </el-form-item>
                <el-form-item label="期号">
                    <el-input v-model="currentPaperInfo.issue" :disabled="!editModel"></el-input>
                </el-form-item>
                <el-form-item label="卷号">
                    <el-input v-model="currentPaperInfo.volume" :disabled="!editModel"></el-input>
                </el-form-item>
                <el-form-item label="页码">
                    <el-input v-model="currentPaperInfo.page" :disabled="!editModel"></el-input>
                </el-form-item>
                <el-form-item label="检索级别">
                    <el-input v-model="currentPaperInfo.retrievalLevel" :disabled="!editModel"></el-input>
                </el-form-item>
                <el-form-item label="作者名单">
                    <el-input v-model="currentPaperInfo.authorList" :disabled="!editModel"></el-input>
                </el-form-item>
                <el-form-item label="第一作者">
                    <el-input v-model="currentPaperInfo.firstAuthor" :disabled="!editModel"></el-input>
                </el-form-item>
                <el-form-item label="通讯作者">
                    <el-input v-model="currentPaperInfo.correspondingAuthor" :disabled="!editModel"></el-input>
                </el-form-item>
                <el-form-item label="发表日期">
                    <el-date-picker v-model="currentPaperInfo.publicationDate" type="date" placeholder="选择日期"
                        value-format="YYYY-MM-DD" :disabled="!editModel"></el-date-picker>
                </el-form-item>
                <el-form-item label="影响因子">
                    <el-input v-model="currentPaperInfo.impactFactor" :disabled="!editModel"></el-input>
                </el-form-item>
                <el-form-item label="论文链接">
                    <el-input v-model="currentPaperInfo.paperLink" :disabled="!editModel"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogChangePaperVisible = !dialogChangePaperVisible">取 消</el-button>
                    <el-button type="primary" @click="studentChangePaper" v-show="editModel">保存修改</el-button>
                    
                    <el-button type="primary" @click="editModel = true" v-show="!editModel && !(currentPaperInfo.reviewStatus==='审核通过'|| currentPaperInfo.reviewStatus==='审核中' )">修改</el-button>
                    <el-button type="primary" v-show="!editModel && currentPaperInfo.reviewStatus==='审核中'" disabled >审核中</el-button>
                    <el-popconfirm title="是否确定提交审核？" @confirm="submitForReview" >
                        <template #reference>
                            <el-button type="primary" v-show="!editModel && (currentPaperInfo.reviewStatus==='待审核' || currentPaperInfo.reviewStatus==='审核拒绝') ">提交审核</el-button>
                        </template>
                    </el-popconfirm>
                    <el-button type="primary" v-show="!editModel && currentPaperInfo.reviewStatus==='审核拒绝'" @click="openRufuseMsg" >审核未通过原因</el-button>

                    <el-popconfirm title="是否确认删除这条记录？" @confirm="deletePaper">
                        <template #reference>
                            <el-button type="danger" v-show="!editModel && currentPaperInfo.reviewStatus!=='审核通过'">删除</el-button>
                        </template>
                    </el-popconfirm>
                </span>
            </template>
        </el-dialog>



    </div>


</template>

<script setup>
import http from '@/utils/axios.js'
import { reactive, ref, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 审核成果
const submitForReview = () => {
    // console.log(currentPaperInfo.value.achievementId);
    try {
        http.patch('/api/review/submit', {achievementId: currentPaperInfo.value.achievementId}
        ).then(res => {
            console.log(res);
            if (res.data.code === 4000) {
                ElMessage.success("提交审核成功！")
                dialogChangePaperVisible.value = false
                studentGetPaper()
            } else {
                ElMessage.error("提交审核失败：" + res.data.msg)
            }
        })
        
    } catch (error) {
        
    }
}

// 查看拒绝原因
const openRufuseMsg = () => {
  ElMessageBox.alert(currentPaperInfo.value.reviewComments, '拒绝原因')
}


// 搜索
var searchForm = reactive({})

const searchPaper = () => {
    console.log(searchForm);
    try {
        http.get('/api/achievement/paper/search', {
            params: {
                dateRangeStart: searchForm.dateRange?.[0],
                dateRangeEnd: searchForm.dateRange?.[1],
                reviewStatusId: searchForm.reviewStatusId

            }
        })
            .then(res => {

                // achievementPaper = reactive([])
                achievementPaper.length = 0;
                Object.assign(achievementPaper, res.data)
                console.log(res)
            })

    } catch (error) {
        console.log(error);
    }
}

const clearSearchOption = () => {
    searchForm.dateRange = null,
        searchForm.reviewStatusId = null
    studentGetPaper()

}



// 从后端获取初始化数据

onMounted(() => {
    try {
        console.log("初始化数据")
        studentGetPaper()

        loading.value = false
    } catch (error) {
        console.error('Error fetching student home info:', error);
    }
})
const loading = ref(true)

// 获取论文数据
const achievementPaper = reactive([]);
const studentGetPaper = () => {
    http.get('/api/achievement/paper')
        .then(res => {
            Object.assign(achievementPaper, res.data);
            console.log(res);
        })
}

// 添加论文
const dialogAddPaperVisible = ref(false)
const studentAddPaperInfo = reactive({})
const handleAddPaper = () => {
    dialogAddPaperVisible.value = true
}
const studentAddPaper = async () => {
    console.log(studentAddPaperInfo);
    try {
        await http.post('/api/achievement/paper', studentAddPaperInfo)
            .then(res => {
                if (res.status === 200) {
                    res = res.data
                    if (res.code === 3000) {
                        studentGetPaper()
                        dialogAddPaperVisible.value = false
                        studentAddPaperInfo.length = 0
                        // studentAddPaperInfo = reactive({})
                        ElMessage.success('添加成功')
                    } else if (res.code === 3001) {
                        ElMessage.error('添加失败：' + res.data.msg)
                    }
                } else {
                    ElMessage.error('添加失败：未知原因')
                }
            })
    } catch (error) {
        console.log(error);
        ElMessage.error('添加失败：未知原因')
    }
}

// 删除论文
const deletePaper = async () => {
    console.log(achievementPaper.items)

    try {
        // currentPaperInfo.value = { ...paper };
        await http.delete('/api/achievement/paper', {
            data: { achievementId: currentPaperInfo.value.achievementId }
        })
            .then(res => {
                if (res.status === 200) {
                    res = res.data
                    if (res.code === 5000) {
                        // 使用 splice 方法删除数组中的项目
                        const index = achievementPaper.findIndex(item => item.achievementId === currentPaperInfo.value.achievementId);
                        if (index !== -1) {
                            achievementPaper.splice(index, 1);
                        }
                        ElMessage.success('删除成功')
                        dialogChangePaperVisible.value = false

                        studentGetPaper()
                    } else if (res.code === 5001) {
                        ElMessage.error('删除失败：' + res.data.msg)
                    }
                } else {
                    ElMessage.error('删除失败：未知原因')
                }
            })

    } catch (error) {
        console.log(error);
        ElMessage.error('删除失败')
    }
}
// 更新论文

const editModel = ref(false)

const dialogChangePaperVisible = ref(false)
const currentPaperInfo = ref({})
var originalPapertName = ''
const handleChangePaper = (paper) => {
    currentPaperInfo.value = { ...paper };
    originalPapertName = currentPaperInfo.value.paperName
    dialogChangePaperVisible.value = true
    editModel.value = false
}
const studentChangePaper = async () => {
    try {
        if (originalPapertName === currentPaperInfo.value.paperName) {
            delete currentPaperInfo.value.paperName
        }

        await http.put('/api/achievement/paper', currentPaperInfo.value)
            .then(res => {
                console.log(res);

                if (res.status === 200) {
                    res = res.data
                    if (res.code === 4000) {

                        ElMessage.success('更新成功')
                        dialogChangePaperVisible.value = false
                        studentGetPaper()

                    } else if (res.code === 4001) {
                        ElMessage.error('更新失败：' + res.data.msg)
                    }
                } else {
                    ElMessage.error('更新失败：未知原因')
                }
            })

    } catch (error) {
        console.log(error);
        ElMessage.error('更新失败')
    }
}
</script>

<style scoped>
.flex-grow {
    flex-grow: 1;
}

.serach-padding {
    padding-right: 20px;
}
</style>